<script type="x-template" id="paginator">
    <div class="pagination" v-if="totalPages > 1">
        <a class="left" v-if="page > 1" @click="ClickA(page -1)"></a>
        <template v-if="totalPages <= 10">
            <a v-for="n in totalPages" :class="{act: n === page }" @click="ClickA(n)"  v-text="n"></a>
        </template>

        <template v-else-if="page < 7">
            <a v-for="n in 10" :class="{act: n === page }" @click="ClickA(n)"  v-text="n"></a>
        </template>
        <template v-else-if="page >= totalPages - 4">
            <a v-for="n in 10" :class="{act: totalPages - 10 + n === page }"  @click="ClickA(totalPages - 10 + n)"  v-text="totalPages - 10 + n"></a>
        </template>

        <template v-else>
            <a v-for="n in 10" :class="{act: page - 6 + n === page }"  @click="ClickA(page - 6 + n)"  v-text="page - 6 + n"></a>
        </template>

        <a class="right" v-if="page < totalPages" @click="ClickA(page + 1)"></a>
    </div>
</script>


<script>
// 创建一个 组件
const Paginator = {
    props: {
        page: {
            type: Number,
            default: 1,
        },
        totalPages: {
            type: Number,
            required: true
        }
    },
    methods: {
        ClickA(n){
            this.$emit('update:page', n);
            this.$emit('click-page') ; // 调用接口更新数据
        }
    },
    template: "#paginator",  // 定义该组件对应的模板
}

</script>

